body {
    font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 优先使用常见中文字体 */
    line-height: 1.7; /* 增加行高，便于阅读 */
    margin: 20px;
    background-color: #f8f9fa; /* 浅灰色背景 */
    color: #343a40; /* 深灰色文字 */
}

h1, h2, h3 {
    color: #0056b3; /* 蓝色标题 */
    border-bottom: 2px solid #dee2e6; /* 稍深的下边框 */
    padding-bottom: 8px;
    margin-top: 30px; /* 增加标题上边距 */
}

h1 {
    text-align: center; /* 主标题居中 */
    margin-bottom: 30px;
}

nav ul {
    list-style: none;
    padding: 0;
    background-color: #e9ecef; /* 导航栏背景色 */
    border-radius: 5px;
    margin-bottom: 25px;
    overflow: hidden; /* 清除浮动 */
    text-align: center; /* 导航项居中 */
}

nav li {
    display: inline-block; /* 水平排列，自动居中 */
    /* float: left; */ /* 不再使用 float */
}

nav a {
    display: block;
    padding: 12px 20px; /* 增加内边距 */
    text-decoration: none;
    color: #0056b3;
    font-weight: bold; /* 导航文字加粗 */
}

nav a:hover, nav a.active { /* 悬停和当前页样式 */
    background-color: #0056b3;
    color: #fff;
    border-radius: 3px;
}

pre {
    background-color: #282c34; /* 深色代码背景 */
    color: #abb2bf; /* 浅色代码文字 */
    border: 1px solid #2c313a;
    padding: 18px;
    border-radius: 8px; /* 圆角更大 */
    overflow-x: auto; /* 处理长代码行 */
    font-family: "Consolas", "Courier New", monospace; /* 等宽字体 */
    font-size: 0.95em; /* 稍大字体 */
    margin-top: 15px;
    margin-bottom: 15px;
}

code { /* 行内代码样式 */
    font-family: "Consolas", "Courier New", monospace;
    background-color: #e9ecef;
    color: #c7254e; /* 稍微醒目的颜色 */
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.code-comment {
    color: #5c6370; /* 注释颜色变灰 */
    font-style: italic;
}

.diagram {
    margin: 30px auto; /* 上下边距，自动左右居中 */
    padding: 20px;
    border: 1px solid #ced4da; /* 边框颜色 */
    background-color: #ffffff; /* 图表背景白色 */
    text-align: center; /* SVG 内部元素居中 */
    overflow-x: auto;
    border-radius: 8px; /* 图表容器圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 轻微阴影 */
    max-width: 95%; /* 限制最大宽度 */
}

svg {
    max-width: 100%; /* SVG 响应式 */
    height: auto;
}

/* SVG 基础样式 */
.svg-rect {
    fill: #e7f5ff; /* 矩形填充色 */
    stroke: #90cfff; /* 矩形边框色 */
    stroke-width: 1.5px;
    rx: 5; /* 矩形圆角 */
    ry: 5;
}
.svg-diamond {
    fill: #fff3cd; /* 菱形填充色 */
    stroke: #ffeeba; /* 菱形边框色 */
    stroke-width: 1.5px;
}
.svg-text {
    font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 图内文字 */
    font-size: 13px; /* 稍大字体 */
    fill: #343a40; /* 文字颜色 */
    text-anchor: middle;
    dominant-baseline: central; /* 垂直居中 */
}
.svg-arrow {
    stroke: #6c757d; /* 箭头颜色 */
    stroke-width: 1.5px;
    marker-end: url(#arrowhead);
}
.svg-line { /* 虚线样式 */
    stroke: #adb5bd;
    stroke-width: 1px;
    stroke-dasharray: 4,4; /* 虚线样式 */
}
.svg-label { /* 用于箭头上标签 */
    font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 11px;
    fill: #6c757d;
    text-anchor: middle;
}

/* 词汇表样式 */
dl {
    margin-left: 0; /* 移除默认缩进 */
    padding-left: 20px; /* 使用内边距 */
}

dt {
    font-weight: bold;
    color: #0056b3;
    margin-top: 15px;
    font-size: 1.1em; /* 术语稍大 */
}

dd {
    margin-left: 20px;
    margin-bottom: 15px;
    padding-left: 10px; /* 解释缩进 */
    border-left: 3px solid #e9ecef; /* 左侧装饰线 */
}

section {
    margin-bottom: 30px;
    padding: 25px;
    background-color: #ffffff; /* 内容区域白色背景 */
    border: 1px solid #dee2e6;
    border-radius: 8px; /* 内容区域圆角 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* 轻微阴影 */
}

article {
    margin-bottom: 25px;
}

.highlight { /* 用于高亮强调 */
    background-color: #fff3cd;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}